<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>:nth-of-type test</title>
    <style>
        p {
            padding: 0;
            margin: 0;
        }
        /** We have weird spacing inside parentheses to test parser. */
        .odd > p:nth-of-type(odd ),
        ._2n-plus-1 > p:nth-of-type(2n+1),
        .even > p:nth-of-type( even),
        ._2n > p:nth-of-type( 2n ),
        ._3n > p:nth-of-type(3n),
        ._2 > p:nth-of-type(2 ),
        ._3n-plus-1 > p:nth-of-type( 3n + 1 ),
        ._3n-minus-1 > p:nth-of-type( 3n -1),
        ._minus-n-plus-3 > p:nth-of-type(-n+ 3),
        .n > p:nth-of-type(n), /** "n" is special case inside parser. */
        .plus-n > p:nth-of-type(+n), /** "+n" is special case inside parser. */
        .minus-n > p:nth-of-type(-n), /** "-n" is special case inside parser. */
        ._0n-plus-1 > p:nth-of-type(-0n+1),
        .n-plus-2__minus-n-plus-4 > p:nth-of-type(+n + 2 ):nth-of-type( -n+4),
        .acid3 > p:nth-of-type(-5n+3) {
            background-color: lightblue;
        }
    </style>
</head>
<body>
<h4>p:nth-of-type(odd)</h4>
<div class="odd">
    <p>1 +</p>
    <p>2</p>
    <div>(div)</div>
    <p>3 +</p>
    <div>(div)</div>
    <p>4</p>
</div>

<h4>p:nth-of-type(2n+1) - same as odd</h4>
<div class="_2n-plus-1">
    <p>1 +</p>
    <p>2</p>
    <div>(div)</div>
    <p>3 +</p>
    <div>(div)</div>
    <p>4</p>
</div>

<h4>p:nth-of-type(even)</h4>
<div class="even">
    <p>1</p>
    <p>2 +</p>
    <div>(div)</div>
    <p>3</p>
    <div>(div)</div>
    <p>4 +</p>
</div>

<h4>p:nth-of-type(2n) - same as even</h4>
<div class="_2n">
    <p>1</p>
    <p>2 +</p>
    <div>(div)</div>
    <p>3</p>
    <div>(div)</div>
    <p>4 +</p>
</div>

<h4>p:nth-of-type(2)</h4>
<div class="_2">
    <p>1</p>
    <p>2 +</p>
    <div>(div)</div>
    <p>3</p>
    <div>(div)</div>
    <p>4</p>
</div>

<h4>p:nth-of-type(3n)</h4>
<div class="_3n">
    <p>1</p>
    <p>2</p>
    <div>(div)</div>
    <p>3 +</p>
    <div>(div)</div>
    <p>4</p>
    <div>(div)</div>
    <div>(div)</div>
    <p>5</p>
    <p>6 +</p>
</div>

<h4>p:nth-of-type(3n+1)</h4>
<div class="_3n-plus-1">
    <p>1 +</p>
    <p>2</p>
    <div>(div)</div>
    <p>3</p>
    <div>(div)</div>
    <p>4 +</p>
</div>

<h4>p:nth-of-type(3n-1)</h4>
<div class="_3n-minus-1">
    <p>1</p>
    <p>2 +</p>
    <div>(div)</div>
    <p>3</p>
    <div>(div)</div>
    <p>4</p>
</div>

<h4>p:nth-of-type(-n+3)</h4>
<div class="_minus-n-plus-3">
    <p>1 +</p>
    <p>2 +</p>
    <div>(div)</div>
    <p>3 +</p>
    <div>(div)</div>
    <p>4</p>
</div>

<h4>p:nth-of-type(n)</h4>
<div class="n">
    <p>1 +</p>
    <p>2 +</p>
    <div>(div)</div>
    <p>3 +</p>
    <div>(div)</div>
    <p>4 +</p>
</div>

<h4>p:nth-of-type(-n) - same as n</h4>
<div class="n">
    <p>1 +</p>
    <p>2 +</p>
    <div>(div)</div>
    <p>3 +</p>
    <div>(div)</div>
    <p>4 +</p>
</div>

<h4>p:nth-of-type(+n) - same as n</h4>
<div class="n">
    <p>1 +</p>
    <p>2 +</p>
    <div>(div)</div>
    <p>3 +</p>
    <div>(div)</div>
    <p>4 +</p>
</div>

<h4>p:nth-of-type(0n+1)</h4>
<div class="_0n-plus-1">
    <p>1 +</p>
    <p>2</p>
    <div>(div)</div>
    <p>3</p>
    <div>(div)</div>
    <p>4</p>
</div>

<h4>p:nth-of-type(n+2):nth-of-type(-n+4)</h4>
<div class="n-plus-2__minus-n-plus-4">
    <p>1</p>
    <p>2 +</p>
    <div>(div)</div>
    <p>3 +</p>
    <div>(div)</div>
    <p>4 +</p>
    <p>5</p>
</div>

<h4>:nth-of-type(-5n+3) - Acid3</h4>
<div class="acid3">
    <p>1</p>
    <div>(div)</div>
    <div>(div)</div>
    <p>2</p>
    <div>(div)</div>
    <p>3 +</p>
    <div>(div)</div>
    <div>(div)</div>
    <div>(div)</div>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <div>(div)</div>
    <p>7</p>
    <div>(div)</div>
    <div>(div)</div>
    <p>8</p>
    <div>(div)</div>
    <p>9</p>
    <p>10</p>
    <p>11</p>
    <p>12</p>
    <p>13</p>
    <p>14</p>
    <p>15</p>
</div>
</body>
</html>
